<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-box">
					<view class="store-info">
						<view class="shop-name-box flexWrapNo">
							<view class="shop-name">{{storeInfo.shop_name}}</view>
							<view class="shop-status" :class="{'repair-status':storeInfo.store_status_data!='business'}">
								<block v-if="storeInfo.store_status_data=='business'">营业中</block>
								<block v-else-if="storeInfo.store_status_data=='rest'">休息中</block>
								<block v-else>筹备中</block>
							</view>
						</view>
						<view class="address-info flexWrap">
							<view class="address-text">{{storeInfo.location||'加载中...'}}</view>
							<view class="distance">{{storeInfo.distance}}<image src="../static/home/righttop.png" class="righttop"></image> </view>
						</view>
					</view>
				</view>
				<view class="verificationBox flexWarpCenterColumn">
					<image src="../static/home/platform-icon.png" class="platform-icon"></image>
					<view class="verification-input flexWrap">
						<input  placeholder="请输入团券码" placeholder-class="placeholderClass"  v-model="qr_code"/>
						<image src="../static/home/scan.png" class="scan-icon" @tap="scanCode()"></image>
					</view>
				</view>
				<view class="explain-box">
					<view>验券说明：</view>
					<view>1、请注意所选门店是否为您所购券的门店，以免误选无</view>
					<view>法正常核销。</view>
					<view>2、输入券码或点击识图验券，选择券二维码图片进行</view>
					<view>验证，验证通过即可立即开台或预约开台。</view>
					<view>3、团购券皆为虚拟商品，核销后概不负责退还。</view>
				</view>
				<view class="btn" @tap="verificationCoupon()">立即验券</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-cont flexWarpCenterColumn" :class="{fail:success==0}">
						<view class="tips-image" :class="{invalid:success==0}">
							<image src="/static/home/success-icon.png" v-if="success==1"></image>
							<block v-else>
								<image src="/static/home/fail-icon.png"></image>
								<!-- <image src="/static/coupon/invalid-icon.png"></image> -->
							</block>
						</view>
						<view class="tips-name" :class="{'fail-tips-name':success==0}">{{success==1?'验券成功':msg}}</view>
						<view class="tips-text">{{success==1?dealInfo.title:'请重新选择'}}</view>
					</view>
					<view class="tips-btn" :class="{'fail-btn':success==0}" @tap="closeTips()">知道了</view>
				</view>
				<view class="picker-box" v-if="pickerFlag">
					<view class="picker-top flexWrap">
						<view class="title">可用团购券</view>
						<view @tap="closePicker" class="couponClose">
							<image src="/static/public/couponClose.png"></image>
						</view>
					</view>
					<view class="picker-cont">
						<view class="picker-item flexWrap" v-for="(item,index) in couponList" :key="index" :class="{active:couponIndex==index}" @tap="bindChange(index)">
							<view class="flexWarpColumn">
								<view>{{item.title}}</view>
								<view>兑换券码:{{item.serial_number}}</view>
							</view>
							<view class="check-box">
								<image src="/static/home/check-icon.png" v-if="couponIndex==index"></image>
								<image src="/static/home/nocheck.png" v-else></image>
							</view>
						</view>
					</view>
					<view class="confirm-btn" @tap="confirm()">确定</view>
				</view>
				<view class="mask-wrap" v-if="tipsFlage"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				storeInfo:{},
				tipsFlage:false,
				success:0,
				qr_code:"",
				deal_title:"",
				dealInfo:{},
				msg:"验券失败",
				tuan_type:0,
				store_id:"",
				equipment_id:"",
				couponList:[],
				pickerFlag:false,
				couponIndex:0
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			if(ops){
				this.equipment_id=ops.equipment_id||uni.getStorageSync('equipment_id')
				this.store_id=ops.store_id||uni.getStorageSync('store_id')
				if(this.store_id){
					uni.setStorageSync('store_id',this.store_id)
					uni.setStorageSync('equipment_id',this.equipment_id)
					this.getCouponListByMobile();
					this.storeDetails();
				}
			}
		},
		methods: {
			storeDetails(){
				this.$request.post(this.$api.storeDetails, {
					store_id:uni.getStorageSync('store_id'),
					longitude:uni.getStorageSync('longitude')||"106.540541",
					latitude:uni.getStorageSync('latitude')||"29.590991"
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.storeInfo=data
					}
				})
			},
			getCouponListByMobile(){
				this.$tools.loadIng();
				this.$request.post(this.$api.getCouponListByMobile, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					if(res.code==1){
						let {
							data = {}
						} = res;
						if(data.length){
							this.couponList=data
							this.pickerFlag=true
							uni.hideLoading()
						}
					}
					
				})
			},
			closePicker(){
				this.pickerFlag=false
			},
			bindChange(index){
				this.couponIndex=index
			},
			confirm(){
				setTimeout(()=>{
					this.pickerFlag=false
					this.qr_code=this.couponList[this.couponIndex].serial_number
				},500)
			},
			showTips(){
				this.tipsFlage=true
			},
			closeTips(){
				this.tipsFlage=false
				let qr_num=this.qr_code
				if(this.success==1){
					if(this.tuan_type==0){
						uni.navigateTo({
							url:'/moduleA/verificationSelect?meituan_id='+this.dealInfo.meituan_id+'&qr_code='+qr_num+'&id='+this.dealInfo.id+'&tuan_type='+this.tuan_type
						})
					}else{
						uni.navigateTo({
							url:'/moduleA/verificationSelect?qr_code='+qr_num+'&douyin_id='+this.dealInfo.goods_id+'&tuan_type='+this.tuan_type
						})
					}
				}
			},
			// 扫码
			scanCode(){
				let that=this
				uni.scanCode({
					success: function (res) {
						console.log(res)
						that.qr_code=res.result.replace(/\s*/g,"")
					}
				});
			},
			//核销
			verificationCoupon(){
				if(!this.qr_code){
					this.$tools.showToast('请输入或者上传后核销')
					return;
				}
				this.tuan_type=this.qr_code.length>=15?1:0
				console.log(this.tuan_type)
				let requestUrl=""
				if(this.tuan_type==0){
					requestUrl=this.$api.verificationCoupon
				}else{
					requestUrl=this.$api.douyinHexiao
				}
				this.$tools.loadIng();
				this.$request.post(requestUrl, {
					store_id:uni.getStorageSync('store_id'),
					qr_code:this.qr_code,
					type:"save",
					store_equipment_id:uni.getStorageSync('equipment_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					this.dealInfo=data
					this.success=res.code
					this.msg=res.msg
					setTimeout(()=>{
						uni.hideLoading()
						this.showTips()
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 30upx;
	}
	.picker-box{
		position: fixed !important;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #232428;
		z-index: 999;
		border-radius: 20upx;
		padding-bottom: 20upx;
		.picker-top{
			padding: 30upx 50upx;
			position: relative;
			.couponClose{
				width: 60upx;
				height: 60upx;
				position: absolute;
				top: 30upx;
				right: 30upx;
			}
			.title{
				font-weight: bold;
				color: #FFF;
				margin: auto;
			}
		}
		.picker-cont {
			height: 400rpx;
			padding: 0 20upx;
			overflow-y: scroll;
			.picker-item {
				line-height: 40rpx;
				color: #838486;
				padding: 28upx;
				font-size: 24upx;
				border: 2rpx solid rgba(255, 255, 255, 0.2);
				border-radius: 20upx;
				margin-top: 10upx;
			}
			.check-box{
				width: 72rpx;
				height: 72rpx;
			}
			.active{
				background: linear-gradient( 180deg, #3D46C7 0%, #7781FD 100%);
				border: none;
				color: #FFF;
			}
		}
		.confirm-btn{
			width: 649rpx;
			height: 124rpx;
			line-height: 124rpx;
			background: linear-gradient( 90deg, #4AA22A 0%, #69D037 100%);
			border-radius: 72rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
			margin-top: 20upx;
		}
	}
	.shop-box{
		border-radius:16upx;
		overflow: hidden;
		margin-bottom: 20upx;
		.store-info{
			background: #232428;
			padding: 36upx 26upx;
			.shop-name-box{
				.shop-name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 34rpx;
					color: #FFFFFF;
				}
				.shop-status{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 118upx;
					height: 48upx;
					line-height: 48upx;
					text-align: center;
					background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
					border-radius: 36upx;
					margin-left: 24upx;
				}
				.repair-status{
					background:#fc750d;
				}
			}
			.address-info{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #B5B6B7;
				margin-top: 20upx;
				.address-text{
					line-height: 40upx;
				}
				.distance{
					width: 185rpx;
					height: 72rpx;
					line-height: 72upx;
					text-align: center;
					border-radius: 44rpx 44rpx 44rpx 44rpx;
					border: 2rpx solid rgba(255,255,255,0.2);
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 26rpx;
					color: #FFFFFF;
					flex: none;
					.righttop{
						width: 20upx;
						height: 20upx;
						margin-left: 10upx;
					}
				}
			}
		}
	}
	.verificationBox{
		height: 248rpx;
		background: #232428;
		border-radius: 20rpx;
		padding: 42upx 28upx;
		.platform-icon{
			width: 175upx;
			height: 72upx;
		}
		.verification-input{
			height: 134rpx;
			border-radius: 88rpx;
			border: 2rpx solid rgba(255,255,255,0.2);
			margin-top: 32upx;
			padding: 0 24upx;
			width: 90%;
			input{
				color: #FFFFFF;
				width: 100%;
				font-size: 28upx;
			}
			.placeholderClass{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
			}
			.scan-icon{
				width: 96upx;
				height: 96upx;
				flex: none;
			}
		}
	}
	.explain-box{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #B5B6B7;
		line-height: 50upx;
		margin-top: 32upx;
	}
	.btn{
		width: 649rpx;
		height: 144rpx;
		line-height: 144rpx;
		background: linear-gradient( 90deg, #4AA22A 0%, #69D037 100%);
		border-radius: 72rpx 72rpx 72rpx 72rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: auto;
		margin-top: 302upx;
	}
	.tips-box{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		height: 600upx;
		.tips-cont{
			width: 660upx;
			min-height: 430upx;
			padding: 20upx;
			padding-top: 0;
			background: linear-gradient( 180deg, #FFFFFF 0%, #FCFFE5 100%);
			border-radius: 20upx;
		}
		.fail{
			background: linear-gradient( 180deg, #FFFFFF 0%, #D8E4FF 100%);
		}
		.tips-image{
			width: 330upx;
			height: 295upx;
			flex: none;
			margin-top: -10upx;
		}
		.invalid{
			width: 330upx;
			height: 295upx;
		}
		.tips-name{
			font-family: PingFang SC;
			line-height: 44upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 38rpx;
			color: #070900;
			margin-top: -30upx;
		}
		.fail-tips-name{
			font-weight: 600;
			font-size: 30rpx;
		}
		.tips-text{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #828475;
			margin-top: 10upx;
		}
		.tips-btn{
			width: 686rpx;
			height: 144rpx;
			line-height: 144rpx;
			background: linear-gradient( 90deg, #4AA22A 0%, #69D037 100%);
			border-radius: 72rpx;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 42upx;
		}
		.fail-btn{
			background: #464F58 !important;
		}
	}
</style>
